start previous next

Shout3D™ 2.0 - Workflow Tutorial

Putting it together

Our rotating animation starts automatically, but our toggle mechanism assumes that the animation will not start until the user clicks. Open up your animated scene file (shoutbox2.wrl or shoutbox2.s3d) and find the TimeSensor node. Change the startTime field value from 0 to �1. This will prevent the TimeSensor from starting automatically. Save this revised scene file shoutbox3.wrl or shoutbox3.s3d.

Since we need to build the HTML page with the JavaScript, we'll do it by hand instead of with the Wizard. Type the following HTML page yourself in a text editor and save it as shoutbox.html in the shout3d_runtime\demos directory of your Shout3D installation.


<html>

<head>
<script language="JavaScript">

var started = false

function toggle() {
	var myTimer  =  document.shoutapplet.getNodeByName("TIMER");

	if (started == false) {

		myTimer.start();
		started = true;
	}
	else if (myTimer.isPaused() == false) {

		myTimer.setPaused(true);
	}
	else {myTimer.setPaused(false);}
}

</script>
</head>

<body> 

<APPLET NAME="shoutapplet" CODEBASE="../codebase" CODE="applets/ExamineApplet.class"
ARCHIVE="shout3dClasses.zip" WIDTH=240 HEIGHT=180>
<param name="src" value="models/shoutbox3.wrl">
<param name="headlightOn" value="true">
</APPLET>


<A HREF="javascript: toggle()">START-STOP</A>

</body>
</html>

Note the how the applet has been given the name shoutapplet in the <APPLET> tag. The name is arbitrary, but is needed to identify the applet in the JavaScript. You'll see this name used as a reference to the applet when calling the getNodeByName() method.

To test your results, make sure that shout3dlogo.gif and shoutbox3.wrl are both in your models directory, then load your startstop.hmtl into a Web browser. Click on the START-STOP text link to operate the toggle. Click Here to see a completed version for reference.

Next>